<template>
    <a-modal
        width="800px"
        centered
        :visible="visible"
        :title="title"
        @ok="handleOk"
        @cancel="handleCancel"
    >
        <!-- 编辑 -->
        <a-form
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 14 }"
            :model="form"
        >
            <a-form-item
                label="字段名称："
                required
                v-bind="validateInfos.zdmc"
            >
                <a-input v-model:value="form.zdmc"></a-input>
            </a-form-item>
            <a-form-item
                label="字段描述："
                required
                v-bind="validateInfos.zdms"
            >
                <a-input v-model:value="form.zdms"></a-input>
            </a-form-item>
            <a-form-item
                label="字段类型："
                required
            >
                <a-input v-model:value="form.sjlx" disabled></a-input>
            </a-form-item>
            <a-form-item
                label="字段长度："
                required
                v-bind="validateInfos.zdcd"
            >
                <a-input v-model:value="form.zdcd"></a-input>
            </a-form-item>
            <a-form-item
                label="字段排序："
                required
                v-bind="validateInfos.plxx"
            >
                <a-input v-model:value="form.plxx"></a-input>
            </a-form-item>
            <!-- <a-form-item label="是否启用：">
                <a-switch :checked="form.sfzj === '1'" @click="toggleChecked" />
            </a-form-item> -->
        </a-form>
        <template #footer>
            <a-button key="back" @click="handleCancel">关闭</a-button>
            <a-button
                key="submit"
                type="primary"
                :loading="loading"
                @click="handleOk"
                >确认</a-button
            >
        </template>
    </a-modal>
</template>

<script lang="ts">
import { useForm } from "@ant-design-vue/use";
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
    name: "DataAdd",
    emits: ["handleOk", "handleCancel"],
    props: {
        loading: Boolean,
        title: String,
        visible: Boolean,
        form: Object,
        type: Number,
    },
    setup(props, { emit }) {
        const { form }: any = toRefs(props);
        const rulesRef = reactive({
            zdmc: [{ required: true, message: "" }],
            sjymc: [{ required: true, message: "" }],
            zdms: [{ required: true, message: "" }],
            sjlx: [{ required: true, message: "" }],
            zdcd: [{ required: true, message: "" }],
            plxx: [{ required: true, message: "" }],
        });
        const { resetFields, validate, validateInfos } = useForm(
            form.value,
            rulesRef
        );
        const state = reactive({
            handleOk: () => {
                validate()
                    .then(() => {
                        emit("handleOk", form.value);
                    })
                    .catch((err) => {
                        console.log("error", err);
                    });
            },
            handleCancel: () => {
                resetFields();
                emit("handleCancel", form.value);
            },
            toggleChecked: (checked: boolean, event: Event) => {
                form.sfzj = checked ? "1" : "0";
            },
        });
        return {
            validateInfos,
            ...toRefs(state),
            ...toRefs(props),
        };
    },
});
</script>